<template>
  <el-dialog title="抽奖设置" :visible.sync="dialogVisible">
    <el-form label-width="120px">
      <el-form-item label="转盘活动">
        <el-select v-model="moduleInfo.jumpId">
          <el-option
            v-for="item in drawActivityList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="转盘背景图">
        <div style="display: flex">
          <el-form-item label="移动端">
            <img-upload
              ref="h5BackgroundUrl"
              :imgSize="IMG_MAX_SIZE"
              @onBackUpload="onBackUpload($event, 'h5BackgroundUrl')"
              @onBackDelImg="onBackDelImg($event, 'h5BackgroundUrl')"
              :limitNumber="1"
              :exceedHidden="true"
            ></img-upload>
            建议尺寸：710*1720
          </el-form-item>
          <el-form-item label="PC端">
            <img-upload
              ref="pcBackgroundUrl"
              :imgSize="IMG_MAX_SIZE"
              @onBackUpload="onBackUpload($event, 'pcBackgroundUrl')"
              @onBackDelImg="onBackDelImg($event, 'pcBackgroundUrl')"
              :limitNumber="1"
              :exceedHidden="true"
            ></img-upload>
            <p>建议尺寸：1440*600</p>
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="中奖背景图">
        <div style="display: flex">
          <el-form-item label="移动端">
            <img-upload
              ref="h5WinningUrl"
              :imgSize="IMG_MAX_SIZE"
              @onBackUpload="onBackUpload($event, 'h5WinningUrl')"
              @onBackDelImg="onBackDelImg($event, 'h5WinningUrl')"
              :limitNumber="1"
              :exceedHidden="true"
            ></img-upload>
            <p class="field-describe">建议尺寸：640*360</p>
          </el-form-item>
          <el-form-item label="PC端">
            <img-upload
              ref="pcWinningUrl"
              :imgSize="IMG_MAX_SIZE"
              @onBackUpload="onBackUpload($event, 'pcWinningUrl')"
              @onBackDelImg="onBackDelImg($event, 'pcWinningUrl')"
              :limitNumber="1"
              :exceedHidden="true"
            ></img-upload>
            建议尺寸：490*310
          </el-form-item>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import dialogMixin from './dialogMixin';
export default {
  mixins: [dialogMixin],
  watch: {},
  created() {
    this.$http
      .get(`${this.$apis.specialActivity.drawActivityPage}?page=1&limit=999`)
      .then(res => {
        this.drawActivityList = res.data.data.list;
        console.log('res', res);
      });
  },
  data() {
    return {
      drawActivityList: [],
      // turnTableData: {
      //   image: '',
      //   awardImage: '',
      // },
      // mixinConfig: {
      //   watchObj: 'turnTableData',
      //   watchKey: ['image', 'awardImage'],
      //   echoImgArray: [
      //     {
      //       dom: 'imgUpLoad',
      //       url: 'image',
      //       type: 'img',
      //     },
      //     {
      //       dom: 'awardImgUpLoad',
      //       url: 'awardImage',
      //       type: 'img',
      //     },
      //   ],
      // },
      turnTableData: {
        h5WinningUrl: '',
        pcBackgroundUrl: '',
        pcWinningUrl: '',
        h5BackgroundUrl: '',
        // refIds: '',
        // jumpId: '',
      },
      mixinConfig: {
        // objKey: 'drawActivityAndImage',
        watchObj: 'turnTableData',
        watchKey: [
          'h5WinningUrl',
          'pcBackgroundUrl',
          'pcWinningUrl',
          'h5BackgroundUrl',
        ],
        echoImgArray: [
          {
            dom: 'h5WinningUrl',
            url: 'h5WinningUrl',
            type: 'img',
          },
          {
            dom: 'pcWinningUrl',
            url: 'pcWinningUrl',
            type: 'img',
          },
          {
            dom: 'pcBackgroundUrl',
            url: 'pcBackgroundUrl',
            type: 'img',
          },
          {
            dom: 'h5BackgroundUrl',
            url: 'h5BackgroundUrl',
            type: 'img',
          },
        ],
      },
    };
  },
  methods: {},
};
</script>

<style scoped>
.field-describe {
  line-height: normal;
}
</style>
